<template>
  <div class="common-logo">
    <image
      src="@/assets/logo.png"
      class="common-logo__icon"
      :style="{ width: `${size}px`, height: `${size}px` }"
    />
    <span class="common-logo__name" :style="labelStyle">{{ label }}</span>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "common-logo",
});

withDefaults(
  defineProps<{
    size?: number;
    label?: string;
    labelStyle?: Record<string, any>;
  }>(),
  {
    size: 148,
    label: "主动健康",
  }
);
</script>

<style lang="less">
.common-logo {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  &__icon {
    width: 148px;
    height: 148px;
  }
  &__name {
    font-weight: bold;
    font-size: 32px;
    color: #000000;
    line-height: 44px;
  }
}
</style>
